<template>
  <div style="padding: 10px">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="所属园区">
            <el-select
              v-model="form.parkId"
              size="mini"
              placeholder="请选择所属园区"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select> </el-form-item
        ></el-col>

        <el-col :span="6"
          ><el-form-item label="所属楼栋">
            <el-select
              v-model="form.buildingId"
              size="mini"
              placeholder="请选择所属楼栋"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="房间名称">
            <el-input
              v-model="form.name"
              size="mini"
              style="width: 200px"
              placeholder="房间名称"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4"
          ><el-form-item label="是否租赁">
            <el-switch v-model="form.isLease"></el-switch> </el-form-item
        ></el-col>
        <el-col :span="4">
          <el-form-item label="是否上架">
            <el-switch v-model="form.isArrive"></el-switch> </el-form-item
        ></el-col>
        <el-col :span="4">
          <el-form-item label="是否自用">
            <el-switch v-model="form.delivery"></el-switch></el-form-item
        ></el-col>
        <el-col :span="4">
          <el-form-item label="是否空调">
            <el-switch
              v-model="form.isAirConditioner"
            ></el-switch></el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="金 额">
            <el-input
              v-model="form.money"
              size="mini"
              style="width: 200px"
              placeholder="小程序展示金额"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="房间面积">
            <el-input
              v-model="form.area"
              size="mini"
              style="width: 200px"
              placeholder="房间面积"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="所属楼层">
            <el-input
              v-model="form.floor"
              size="mini"
              style="width: 200px"
              placeholder="所属楼层"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="业务费">
            <el-input
              v-model="form.money"
              size="mini"
              style="width: 200px"
              placeholder="小程序展示金额"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="支付方式">
            <el-input
              v-model="form.rentType"
              size="mini"
              style="width: 200px"
              placeholder="支付方式"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="层高">
            <el-input
              v-model="form.floorHeight"
              size="mini"
              style="width: 200px"
              placeholder="设备编号"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="房间物资">
            <el-input
              v-model="form.name"
              size="mini"
              placeholder="房间物资"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>

      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标签">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              style="width: 120px"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+ 添加标签</el-button
            >
          </el-form-item></el-col
        >
      </el-row> -->

      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="设备编号">
            <el-input
              v-model="form.weMeterIds"
              size="mini"
              style="width: 200px"
              placeholder="设备编号"
            ></el-input
            ><el-button type="text" style="margin-left: 10px">添加</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="房间标签">
            <el-input
              v-model="form.labels"
              size="mini"
              placeholder="房间标签;如:临地铁,TODO"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="装修情况">
            <el-input
              v-model="form.renovation"
              size="mini"
              placeholder="如:精装修,1.5米》"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="是否寝室">
            <el-switch v-model="form.isInternal"></el-switch> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="最大人数">
            <el-input
              v-model="form.maxNumberOfPeople"
              size="mini"
              style="width: 200px"
              placeholder="寝室最大人数"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="寝室性质">
            <el-select v-model="form.nature" size="mini" placeholder="寝室性质">
              <el-option label="单人寝室" value="1"></el-option>
              <el-option label="双人寝室" value="2"></el-option>
              <el-option label="四人寝室" value="3"></el-option>
              <el-option label="四人以上" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="房间图片">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="form.remarks"
              rows="5"
              placeholder="备注"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" style="text-align: center">
          <el-button type="primary" @click="handleSave" size="mini"
            >保存</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
  
  <script>
import { addRoom } from "../../api/room";
export default {
  props: {},
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      imageUrl: "",
      form: {
        parkId: 19,
        name: "单价出租", // 房间名称
        type: 1, //类别  1 个人  2 企业
        buildingId: 29, // 所属楼栋
        isArrive: true, // 是否上架
        isLease: false, // 是否出租
        area: "200", //房间面积
        money: "5000", // 金额
        rentType: 1, //租金支付方式 1 月付 2 季付  3 半年付 4 年付
        maintenanceType: 1, //物业费支付方式 1 月付 2 季付 3 半年付 4 年付
        floor: 1, //所属楼层
        weMeterIds: [19], // 设备编号
        pictureIds: [], // 图片
        propertyIds: [], //  资产列表
        propertyManagement: "", //签订物业费
        isInternal: true, // 是否自用
        isFullCapacity: true, // 是否满载
        maxNumberOfPeople: 4, // 最大人数
        nature: 1, // 寝室性质 1 单人 2 双人 3 四人 4 四人以上
        isAirConditioner: true, // 是否有空调
        remarks: "豪华单价出租", // 备注
        floorHeight: 5, // 楼层高度
        renovation: "精装修", // 装修情况
        labels: "临地铁,TODO", // 标签
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {},
    handleDetails(id) {},
    handleSave() {
      console.log(this.form);
      addRoom(this.form).then((res) => {
        this.$message.success(res.msg);
        window.open(
          this.$router.resolve({ path: "/yuanqu/room" }).href,
          "_blank"
        );
      });
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
  components: {},
};
</script>
  
  <style>
.el-form-item {
  margin-bottom: 12px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-top: 1%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  margin-top: 1%;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
  